<script setup lang="ts">
import type { ArticleItem, ArticleResData, AxiosResData, ChannelResData } from '@/types';
import axios from 'axios';
import { ref, watch } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter()
const list = ref<ArticleItem[]>([])
import { useChannelStore } from '@/stores/channel';
const store = useChannelStore()
//父传子Prop,定义channelId来接收
//因为需要监听，所以定义一个props来存储父传过来的channelId
// const props= defineProps<{
//   channelId: number;
// }>()
//监听器需要传两个值，一个是监听的对象：props里面的channelId
//另一个是回调函数
// watch(()=>props.channelId,async()=>{
//   console.log(props.channelId)
  
//   const res = await axios.get<AxiosResData<ArticleResData>>('https://geek.itheima.net/v1_0/articles',{
//     params:{
//       channel_id: props.channelId,
//       timestamp: Date.now(),
//     }
//   })
//   console.log('呀吼',res.data.data.results)
//   list.value=res.data.data.results
// },{immediate:true})
watch(()=>store.channelId,async()=>{
  console.log(store.channelId)
  
  const res = await axios.get<AxiosResData<ArticleResData>>('https://geek.itheima.net/v1_0/articles',{
    params:{
      channel_id: store.channelId,
      timestamp: Date.now(),
    }
  })
  console.log('呀吼',res.data.data.results)
  list.value=res.data.data.results
},{immediate:true})
//immediate立即渲染
//循环图片,所以加了一个v-for,里面放三个，一个自定义的图片或其他路径（名字）,如url
//一个是initem.cover.images
//一个是具体的路径,如
//再将src后面的写死的路径换成自定义的路径
</script>

<template>
  <div class="article-list">
    <div class="article-item" v-for="item in list" :key="item.art_id" @click="router.push(`/dtail/${item.art_id}`)">
      <p class="title">{{item.title}}</p>
      <img v-for="url in item.cover.images" class="img" :src="url" alt="">
      
      <div class="info">
        <span>{{item.aut_name}}</span>
        <span>{{ item.comm_count }}评论</span>
        <span>{{item.pubdate}}</span>
      </div>
    </div>
  </div>
</template>